<template>
    <!-- 考生信息 -->
    <div class="layer-user-info">
            <div class="wrap" id="wrap_div" style="margin: 0 auto;">
                <div class="box-wrap check-user-info">
                    <table border='0'>
                        <tbody>
                        <tr>
                            <th>姓<span class="block"></span>名：</th>
                            <td><span>{{nickname}}</span></td>
                            <td rowspan="6" class="td-photo">
                                <img src="../static/images/photo.png" alt="照片"></td>
                        </tr>
                        <tr>
                            <th>性<span class="block"></span>别：</th>
                            <td><span>{{gender}}</span></td>
                        </tr>
                        <tr>
                            <th>准考证号：</th>
                            <td><span>1234</span></td>
                        </tr>
                        <tr>
                            <th>证件号码：</th>
                            <td><span>11010819831015269X</span></td>
                        </tr>
                        <tr>
                            <th>考试科目：</th>
                            <td><span>注册会计师—会计</span></td>
                        </tr>
                        <tr>
                            <th>考试时间：</th>
                            <td><span>{{examTime}}</span></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="ta-c"><a href="javascript:void(0);" class="btn-s-close showInfoBtn" @click="hideMy">关闭</a></div>
            </div>
        </div>
</template>
<script>
export default {
    // props:["userInfoToggle"],
    data(){
        return {
            nickname:'',
            gender:'男'
        }
    },
    created(){
        let nickname = localStorage.getItem('nickname')
        if(nickname.length>0){
            this.nickname = nickname
        }else{
            this.nickname = '张三'
        }
        this.gender = localStorage.getItem('gender')
        let time = new Date();
        this.examTime =  time.getFullYear()+'年'+(time.getMonth()+1)+'月' +time.getDate()+'日';
    },
    methods:{
        hideMy:function(){
            console.log("hide")
            this.$emit("userInfoToggle")
        }
    }
}
</script>

<style lang="scss" scoped>

.layer-user-info{//考生信息
    table{
        border: none;
    }
    td,table th {
        border: 0!important;
    }
    position: absolute;
    top: 230px;
    width: 100%;
    .wrap {
        width: 543px;
        padding: 20px 0;
        background-color: #FFF;
        border: 2px solid #C1CEE3;
        .ta-c {
            text-align: center;
        }
        .btn-s-close {
            background: url(http://hmwx.wdexam.com/Public/Home/img/examTp/cpa/btn-s-close.png) no-repeat;
            width: 58px;
            height: 28px;
            display: inline-block;
            font-size: 0;
        }
        .box-wrap {
            background-color: #F5FAFE;
            border: 1px solid #C6DEF6;
            border-radius: 10px;
            box-shadow: 3px 3px 10px #666;
            margin: 0 auto;
            padding-bottom: 20px;
            overflow-y: auto;
            padding:0 20px 18px 20px;
        }
        .check-user-info {
            width: 480px;
            overflow: hidden;
            padding-top: 10px;
            th .block {
                display: inline-block;
                width: 29px;
            }
            td span {
                display: block;
                border-bottom: 1px solid #000;
                text-align: center;
                color: #4E5C76;
            }
            .td-photo{
                width: 120px;
            }
            .td-photo img {
                width: 120px;
            }
            table {
                width: 100%;
                font-size: 14px;
            }
            th, td {
                padding: 5px;
                padding-right: 16px;
            }
        }
    }
}
</style>
